iT邦幫忙

2024 iThome 鐵人賽

DAY 10
0
Mobile Development

SwiftUI快速入門30天系列 第 10

Day10 - 資料大多超出螢幕怎辦?二個法寶ScrollView與LazyVStack

  • 分享至 

  • xImage
  •  

在iOS開發中,處理長列表和滾動是一個常見的需求,尤其是在需要展示大量資料的應用中。ScrollViewLazyVStack 是SwiftUI中用來處理這類需求的兩個重要工具,分別負責滾動功能和高效渲染。

首先,ScrollView 是一個可以滾動的容器,允許你將大量的內容放入其中,並使其在垂直或水平方向上滾動。它非常適合處理靜態內容或內容量有限的情況,因為所有的子視圖會在載入時一次性地顯示出來。然而,當需要處理大量數據時,例如長列表,這樣的設計可能會帶來性能問題。由於ScrollView會同時載入所有子視圖,當視圖數量過多時,應用的記憶體使用和渲染速度都會受到影響,導致卡頓或滯後。

這時,LazyVStack 的出現就顯得尤為重要。LazyVStack 也是一個垂直堆疊容器,但與普通的VStack不同,它具有延遲載入的特性。這意味著,LazyVStack只會在子視圖即將出現在螢幕上時才進行載入和渲染。這種“懶加載”的方式可以顯著減少一次性載入的視圖數量,從而大幅提升性能,特別是在處理長列表的情況下。因此,當需要展示大量可滾動的資料時,將 LazyVStack 放在 ScrollView 內部是一個高效的做法,既保留了滾動的功能,又能確保應用的流暢度。

以下是一個簡單的例子,展示如何在 SwiftUI 中使用 ScrollViewLazyVStack 來處理一個包含大量資料的長列表:

import SwiftUI

struct ContentView: View {
    let items = Array(1...1000).map { "Item \($0)" }

    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 10) {
                ForEach(items, id: \.self) { item in
                    Text(item)
                        .padding()
                        .background(Color.blue.opacity(0.2))
                        .cornerRadius(8)
                }
            }
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

https://ithelp.ithome.com.tw/upload/images/20240824/20112100VHwNzfzutG.png

在這個例子中,我們首先建立了一個包含 1000 個元素的Array items,每個元素都是一個字串 "Item",後接一個數字。ScrollView 提供了垂直滾動的功能,使得列表可以上下滑動。而 LazyVStack 則負責排列這些元素,但只有在元素即將進入視圖時才會載入它們,這樣可以顯著提升性能,避免了一次性載入過多視圖帶來的記憶體壓力。

總結來說,ScrollView 提供了必要的滾動功能,而 LazyVStack 確保了在處理大量動態內容時的性能表現。這兩者的結合使用,可以有效地解決長列表和滾動的問題,為使用者提供流暢且高效的操作體驗。


上一篇
Day 9 - List 控件,使用 List 顯示資料列表
下一篇
Day11 - Form 和 Section,建立表格和分組
系列文
SwiftUI快速入門30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言